<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>

    <style>
        /*  * 是通配符选择器，是选中页面所有的元素 */
        * {
            /* 消除浏览器的默认样式 */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            width: 600px;
            margin: 20px auto;
        }
        h1 {
            text-align: center;
        }
        p {
            text-align: center;
            color: #666;
            margin: 20px 0;
        }
        .row {
            /* 开启弹性布局 */
            display: flex;
            height: 40px;
            /* 水平方向的居中 */
            justify-content: center; 
            /* 垂直方向的居中 */
            align-items: center;
        }
        .row span {
            width: 100px;
        }
        .row input {
            width: 200px;
            height: 30px;
        }
        .row button {
            width: 280px;
            height: 30px;
            color: white;
            background-color: orange;
            /* 去掉边框 */
            border: none;
            /* 加上圆角矩形 */
            border-radius: 5px;
        }
        /* 点击的时候有个反馈 */
        .row button:active {
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入内容后点击提交信息会显示到下方表格中</p>

        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>说：</span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
        <div class="row">
            <button id="revert">撤销</button>
        </div>

    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <script>
        // 实现提交操作，点击提交按钮，就能够把用户输入的内容提交到页面上显示
        // 点击的时候，获取到三个输入框中的内容
        // 创建一个新的 div.row 把内容构造到这个 div 中即可
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('#submit');
        button.onclick = function() {
            // 1.获取到是哪个输入框的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if(from == '' || to == '' || msg == '') {
                return;
            }
            // 2.构造新的 div
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row message';
            // 写入 rowDiv
            rowDiv.innerHTML = from + '对' + to + '说' + msg;
            // 进行添加
            containerDiv.appendChild(rowDiv); 
            // 3.清空之前的内容
            for(let input of inputs) {
                input.value = '';
            }

            // 4.【新增】给服务器发起 post 请求，把上述数据提交到服务器这边
            // 定义一个 js 对象，js 中要求对象的 key 务必使字符串，引号可以省略
            let body = { 
                "from": from,
                "to": to,
                "message": msg
            };
            let strBody = JSON.stringify(body);
            console.log("strBody: " + strBody);
            $.ajax({
                type: 'post',
                url: 'message',
                data: strBody,
                contentType:"application/json; charset=utf8",
                success:function(body) {
                    console.log("数据发布成功");
                }
            });
        }
        
        let revertButton = document.querySelector('#revert');
        revertButton.onclick = function() {
            // 删除最后一条消息，选中所有的 row，找到最后一个 row，然后进行删除
            let rows = document.querySelectorAll('.message');
            if(rows == null || rows.length == 0) {
                return;
            }
            containerDiv.removeChild(rows[rows.length - 1]);
        }

        // 【新增】在页面加载的时候，发送 GET 请求，从服务器获取到数据并添加到页面中
        $.ajax({
            type: 'get',
            url: 'message',
            success: function(body) {
                // 此处拿到的 body 就是一个 js 的对象数组了
                // 本来服务器返回的是一个 json 格式的字符串，但是 jQuery 的 ajax 能够自动识别
                // 自动帮我们把 json 字符串转成 js 对象数组
                // 接下来遍历这个数组，把元素取出来，构造到页面中即可
                let containerDiv = document.querySelector('.container');
                for(let message of body) {
                    // 针对每个元素构造一个 div
                    let rowDiv = document.createElement('div');
                    rowDiv.className = 'row message';
                    rowDiv.innerHTML = message.from + ' 对' + message.to + ' 说：' + message.message;
                    containerDiv.appendChild(rowDiv);
                }
            }
        });
    </script>
</body>
</html>